import Vue from 'vue'

const app = new Vue({
  // el: '#root',
  template: '<div ref="div">{{ text }}</div>', // 有runtime没法写template这个配置项
  data: {
    text: 0
  }
  // watch: {
  //   text (newText, oldText) {
  //     console.log(`${newText} : ${oldText}`)
  //   }
  // }
})

app.$mount('#root') // 这个方法是把vue挂载在root上

setInterval(() => {
  app.text += 1
  app.text += 1
  app.text += 1
  app.text += 1
  app.text += 1
}, 1000)

// console.log(app.$data) // 这个改可以变化
// console.log(app.$props)
// console.log(app.$el)
// console.log(app.$options) // vue里面一整个对象,这里面该data是没用的
// app.$options.render = (h) => {
//   return h('div', {}, 'new render function')
// }
// console.log(app.$root === app)
// console.log(app.$children) // 组件里面
/* console.log(app.$slots)
console.log(app.$scopedSlots)
插槽
*/
// console.log(app.$refs) //模板里面的引用 快速定位模板里面的某个节点
// console.log(app.$isServer) //一般不会用到，只有服务端渲染才能用到，判断是不是服务端渲染
/* const unWatch = app.$watch('text', (newText, oldText) => {
  console.log(`${newText} : ${oldText}`)
}) // 和写到options里面是一样的
setTimeout(() => {
  unWatch()
}, 2000) */
// app.$once('test', (a, b) => {
//   console.log(`test emmited ${a} ${b}`)
// })
// $once和$on只触发一次
// app.$emit('test', 1, 2) // 触发事件

// setInterval(() => {
//   app.$emit('test', 2, 3)
// }, 1000)
// app.$set(app.obj, 'a', i)  $delete这样可以直接加属性
// app.forceUpdate() 让组件强制重新渲染一次，除非万不得已，强制渲染性能比较低
